<!--
 * @Author: liqing
 * @Date: 2020-03-14 14:31:20
 * @LastEditTime: 2020-08-18 17:56:10
 * @LastEditors: Please set LastEditors
 * @Description: 科研嵌入用
 * @FilePath: \topologyproject\src\components\topologyDisplay\toposhow\sceneAndProjectData.vue
 -->
<template>
    <div :class="showType == 1 ? 'vm-stastics' : 'deploy-record'">
        <ul class="outlineStyle" v-if="showType == '1'">
            <!-- <li class="modalLi" style="border-bottom:1px dotted #DDE4EB;border-right:1px dotted #DDE4EB;">
                     <div class="oDiv">
                         <img src="../assets/topoShow/wlzsN_.png" class="oImage"/>
                         <span class="numberTop">{{topoData.netCount}}</span>
                         <span class="textBottom">网络总数</span>
                     </div>
                 </li> -->
            <li class="modalLi">
                <!-- <div class="oDiv" :style="{ height: autoHeight + 'px' }"> -->
                <img src="../assets/topoShow/xnsbN_.png" class="oImage" />
                <div class="count">
                    <span class="textBottom">虚拟设备</span>
                    <span class="numberTop">{{ topoData.vmCount }}</span>
                </div>
            </li>
            <li class="modalLi">
                <img src="../assets/topoShow/swsbN_.png" class="oImage" />
                <div class="count">
                    <span class="textBottom">实物设备</span>
                    <span class="numberTop">{{ topoData.deviceCount }}</span>
                </div>
            </li>
            <!--<li class="modalLi"  style="border-bottom:1px dotted #DDE4EB;">
                     <div class="oDiv" :style="{height:autoHeight+'px'}" >
                         <img src="../assets/topoShow/gfgjN_.png" class="oImage"/>
                         <span class="numberTop" :style="{bottom:(autoHeight>60?'20':'5')+'px'}">{{topoData.armCount}}</span>
                         <span class="textBottom" :style="{top:(autoHeight>60?'20':'10')+'px'}">攻防工具</span>
                     </div>
                 </li>-->
            <!-- <li class="modalLi">
                <img src="../assets/topoShow/slfN_.png" class="oImage" />
                <div class="count">
                    <span class="textBottom">分靶场设备</span>
                    <span class="numberTop">{{ topoData.partyCount }}</span>
                </div>
            </li> -->
            <li class="modalLi">
                <img src="../assets/topoShow/cpuN_.png" class="oImage" />
                <div class="count">
                    <span class="textBottom">CPU</span>
                    <span class="numberTop">{{ topoData.cpu }}</span>
                </div>
            </li>
            <li class="modalLi">
                <img src="../assets/topoShow/diskN_.png" class="oImage" />
                <div class="count">
                    <span class="textBottom">DISK/GB</span>
                    <span class="numberTop">{{ topoData.disk }}</span>
                </div>
            </li>
            <li class="modalLi">
                <img src="../assets/topoShow/ramN_.png" class="oImage" />
                <div class="count">
                    <span class="textBottom">RAM/GB</span>
                    <span class="numberTop">{{ Math.round(parseInt(topoData.ram) / 1024) }}</span>
                </div>
            </li>
        </ul>
        <div class="topModalStyle" v-else-if="showType == '2'">
            <Button
                size="small"
                type="primary"
                style="border-bottom: none"
                @click="showDeployRecord"
            >
                部署记录
            </Button>
            <Modal v-model="showDeployRecordModal" title="部署记录" footer-hide>
                <Table
                    :columns="deployClums"
                    :data="deployHistoryData"
                    size="small"
                    :height="deployHeight"
                    id="deplogyHistory"
                ></Table>
            </Modal>
            <Modal
                v-model="deplogyPanel"
                :closable="false"
                footer-hide
                width="80"
                :mask-closable="false"
                id="leftplatformDeailPanel"
            >
                <div class="deplogyPanelclose" @click="deplogyPanel = false"></div>
                <p slot="header">
                    <Icon type="ios-information-circle"></Icon>
                    <span>部署详情</span>
                    <RadioGroup
                        v-model="rangeId"
                        @on-change="switchRange"
                        style="padding-left: 20px"
                    >
                        <Radio v-for="(item, idx) in rangeList" :key="idx" :label="item.rangeId">{{
                            item.rangeName
                        }}</Radio>
                    </RadioGroup>
                    <span
                        style="display: inline-block; float: right; font-weight: 500; color: #666"
                    >
                        <span
                            ><u class="uStyle">状态:</u
                            ><a
                                :style="{
                                    display: 'inline-block',
                                    width: '50px',
                                    background: deployDataDeatil.bgColor,
                                    color: '#fff',
                                    borderRadius: '10px',
                                    textAlign: 'center',
                                }"
                                >{{ deployDataDeatil.text }}</a
                            ></span
                        >
                        <Divider type="vertical" />
                        <span><u class="uStyle">开始时间:</u>{{ deployDataDeatil.startTime }}</span>
                        <Divider type="vertical" />
                        <span><u class="uStyle">结束时间:</u>{{ deployDataDeatil.endTime }}</span>
                        <Divider type="vertical" />
                        <span v-if="deployDataDeatil.experTime"
                            ><u class="uStyle">用时:</u>{{ deployDataDeatil.experTime }}</span
                        >
                        <span v-else
                            ><u class="uStyle">用时:</u
                            >{{
                                formatSeconds(
                                    (Date.parse(currentTimeValue) -
                                        Date.parse(new Date(deployDataDeatil.startTime))) /
                                        1000
                                )
                            }}</span
                        >
                        <Divider type="vertical" />
                        <span><u class="uStyle">操作人:</u>{{ deployDataDeatil.craetor }}</span>
                    </span>
                </p>
                <!-- <div> -->
                <div class="deployHeader">
                    <div
                        :style="{
                            width: myChart2oWidth,
                            display: 'inline-block',
                            border: ' 1px solid #e7e7f1',
                            marginRight: '0.5%',
                        }"
                    >
                        <div
                            :style="{
                                width: '100%',
                                background: '#fff',
                                color: 'rgb(51, 51, 51);',
                                borderBottom: ' 1px solid #e7e7f1',
                                height: '28px',
                                lineHeight: '28px',
                                paddingLeft: '5px',
                            }"
                        >
                            部署总进度
                        </div>
                        <div
                            id="myChart2"
                            :style="{
                                width: myChart2oWidth,
                                height: '222px',
                                display: 'inline-block',
                            }"
                        ></div>
                    </div>
                    <div
                        :style="{
                            width: myChart3oWidth,
                            display: 'inline-block',
                            border: ' 1px solid #e7e7f1',
                            marginRight: '0.5%',
                        }"
                    >
                        <div
                            :style="{
                                width: '100%',
                                background: '#fff',
                                color: 'rgb(51, 51, 51);',
                                borderBottom: ' 1px solid #e7e7f1',
                                height: '28px',
                                lineHeight: '28px',
                                paddingLeft: '5px',
                            }"
                        >
                            部署内容
                        </div>
                        <!-- <div id="myChart3" :style="{width: myChart3oWidth, height: '222px',display:'inline-block'}"></div> -->
                        <ul
                            :style="{
                                width: myChart3oWidth,
                                height: '222px',
                                display: 'inline-block',
                            }"
                            id="containerUL"
                        >
                            <li>
                                <div class="oDivStyle">
                                    <p class="oPStyle">
                                        <img :src="getImageName('SG')" style="width: 45px" />
                                    </p>
                                    <p class="oPStyle">{{ deviedTypeSwitch('SG') }}</p>
                                    <p class="oPStyle">{{ topoDataNumber.SG }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="oDivStyle">
                                    <p class="oPStyle">
                                        <img :src="getImageName('SN')" style="width: 45px" />
                                    </p>
                                    <p class="oPStyle">{{ deviedTypeSwitch('SN') }}</p>
                                    <p class="oPStyle">{{ topoDataNumber.SN }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="oDivStyle">
                                    <p class="oPStyle">
                                        <img :src="getImageName('VM')" style="width: 45px" />
                                    </p>
                                    <p class="oPStyle">{{ deviedTypeSwitch('VM') }}</p>
                                    <p class="oPStyle">{{ topoDataNumber.VM }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="oDivStyle">
                                    <p class="oPStyle">
                                        <img :src="getImageName('SW')" style="width: 45px" />
                                    </p>
                                    <p class="oPStyle">{{ deviedTypeSwitch('SW') }}</p>
                                    <p class="oPStyle">{{ topoDataNumber.SW }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="oDivStyle">
                                    <p class="oPStyle">
                                        <img :src="getImageName('TSW')" style="width: 45px" />
                                    </p>
                                    <p class="oPStyle">{{ deviedTypeSwitch('TSW') }}</p>
                                    <p class="oPStyle">{{ topoDataNumber.TSW }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="oDivStyle">
                                    <p class="oPStyle">
                                        <img :src="getImageName('P')" style="width: 45px" />
                                    </p>
                                    <p class="oPStyle">{{ deviedTypeSwitch('P') }}</p>
                                    <p class="oPStyle">{{ topoDataNumber.P }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="oDivStyle">
                                    <p class="oPStyle">
                                        <img :src="getImageName('PHY')" style="width: 45px" />
                                    </p>
                                    <p class="oPStyle">{{ deviedTypeSwitch('PHY') }}</p>
                                    <p class="oPStyle">{{ topoDataNumber.PHY }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="oDivStyle">
                                    <p class="oPStyle">
                                        <img :src="getImageName('IF')" style="width: 45px" />
                                    </p>
                                    <p class="oPStyle">{{ deviedTypeSwitch('IF') }}</p>
                                    <p class="oPStyle">{{ topoDataNumber.IF }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="oDivStyle">
                                    <p class="oPStyle">
                                        <img :src="getImageName('VO')" style="width: 45px" />
                                    </p>
                                    <p class="oPStyle">{{ deviedTypeSwitch('VO') }}</p>
                                    <p class="oPStyle">{{ topoDataNumber.VO }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="oDivStyle">
                                    <p class="oPStyle">
                                        <img :src="getImageName('TR')" style="width: 45px" />
                                    </p>
                                    <p class="oPStyle">{{ deviedTypeSwitch('TR') }}</p>
                                    <p class="oPStyle">{{ topoDataNumber.TR }}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div
                        :style="{
                            width: myChart1oWidth,
                            display: 'inline-block',
                            border: ' 1px solid #dcdee2',
                        }"
                    >
                        <div
                            :style="{
                                width: '100%',
                                background: '#fff',
                                color: 'rgb(51, 51, 51);',
                                borderBottom: ' 1px solid #e7e7f1',
                                height: '28px',
                                lineHeight: '28px',
                                paddingLeft: '5px',
                            }"
                        >
                            部署实况
                        </div>
                        <div
                            id="myChart1"
                            :style="{
                                width: myChart1oWidth,
                                height: '222px',
                                display: 'inline-block',
                            }"
                        ></div>
                    </div>
                    <!-- <div style="display:inline-block;height:250px;width:30%" v-show="deployHistoryTable">
                         <p style="text-align:center;font-size:18px;font-weight:600;color:#444;position:relative;bottom:50px">部署记录</p>
                         <Table border  :columns="deployClums" :data="deployHistoryData"  stripe show-header size="small" height="155" style="position:relative;bottom:35px"></Table>
                     </div> -->
                </div>
                <div
                    class="deployContent"
                    style="width: 100%"
                    :style="{ height: deployContentHeight }"
                >
                    <div
                        class="deployContentTypeDiv"
                        v-for="(itemType, index) in deployData"
                        :key="index"
                    >
                        <div class="titleType" :style="{ paddingRight: '15px' }">
                            <div
                                class="leftName"
                                style="width: 120px; overflow: hidden; float: left"
                            >
                                <P
                                    class="lf"
                                    style="
                                        color: #333;
                                        margin-left: 8px;
                                        height: 28px;
                                        text-align: left;
                                    "
                                    >{{ deviedTypeSwitch(itemType.type) }}</P
                                >
                                <P class="lf titleModel" style="color: #333"
                                    ><a style="color: #333"
                                        ><span
                                            >({{
                                                itemType.static.success +
                                                itemType.static.failed +
                                                itemType.static.configed +
                                                itemType.static.doing
                                            }})</span
                                        ></a
                                    ></P
                                >
                            </div>
                            <div
                                class="lf"
                                :style="{
                                    minWidth: itemType.deployContentTitleWidth,
                                    marginLeft: '10px',
                                    position: 'relative',
                                }"
                                id="progessOutline"
                            >
                                <Progress
                                    :percent="itemType.successPro"
                                    status="active"
                                    style="position: relative; bottom: 1px"
                                    :stroke-color="['#3d52c9', '#3d52c9']"
                                    hide-info
                                />
                                <span
                                    style="color: #3d52c9; position: absolute; top: 0; right: -45px"
                                    >{{ itemType.successPro }}%</span
                                >
                            </div>

                            <div class="rt">
                                <Icon
                                    v-if="itemType.static.failed != 0"
                                    type="ios-information-circle"
                                    style="
                                        font-size: 18px;
                                        color: #ff5d5c;
                                        vertical-align: text-bottom;
                                    "
                                ></Icon>
                                <a
                                    v-if="itemType.static.failed != 0"
                                    style="
                                        position: relative;
                                        bottom: 1px;
                                        font-size: 14px;
                                        color: #ff5d5c;
                                        cursor: pointer;
                                    "
                                    @click="getDataListError(itemType.type)"
                                    >失败详情</a
                                >
                                <Icon
                                    v-if="panelBolList[index]"
                                    type="ios-arrow-down"
                                    style="
                                        font-size: 16px;
                                        cursor: pointer;
                                        position: relative;
                                        bottom: 2px;
                                        left: 4px;
                                    "
                                    @click="shrinkPanel(index)"
                                />
                                <Icon
                                    v-else
                                    type="ios-arrow-forward"
                                    style="
                                        font-size: 16px;
                                        cursor: pointer;
                                        position: relative;
                                        bottom: 2px;
                                        left: 4px;
                                    "
                                    @click="shrinkPanel(index)"
                                />
                                <!-- <Icon type="ios-eye"  style="position:relative;bottom:1px;font-size:24px;color:#fff;cursor:pointer;" /> -->
                                <!-- <Button type="primary" size="small" style="position:relative;bottom:1px;" @click="getDataListError(itemType.type)">查看详情</Button> -->
                            </div>
                            <Divider
                                v-if="itemType.static.failed != 0"
                                type="vertical"
                                class="rt"
                                dashed
                                style="position: relative; top: 7px; right: 15px; background: #999"
                            />
                            <P class="rt titleModel" style="color: #333"
                                ><a style="color: #333"
                                    >成功:<span>{{ itemType.static.success }}</span></a
                                ></P
                            >
                            <Divider
                                type="vertical"
                                class="rt"
                                style="position: relative; top: 7px; right: 15px; background: #999"
                            />
                            <P class="rt titleModel" style="color: #333"
                                ><a style="color: #333"
                                    >失败:<span>{{ itemType.static.failed }}</span></a
                                ></P
                            >
                            <Divider
                                type="vertical"
                                class="rt"
                                style="position: relative; top: 7px; right: 15px; background: #999"
                            />
                            <P class="rt titleModel" style="color: #333"
                                ><a style="color: #333"
                                    >等待:<span>{{ itemType.static.configed }}</span></a
                                ></P
                            >
                            <Divider
                                type="vertical"
                                class="rt"
                                style="
                                    position: relative;
                                    top: 7px;
                                    right: 15px;
                                    background: #999;
                                    margin-left: 23px;
                                "
                            />
                            <P class="rt titleModel" style="color: #333"
                                ><a style="color: #333"
                                    >进行中:<span>{{ itemType.static.doing }}</span></a
                                ></P
                            >
                        </div>
                        <div
                            :style="{
                                width: '100%',
                                overflow: 'auto',
                                background: '#fff',
                                height: panelBolList[index] ? '' : 0,
                            }"
                            class="scorllHidden"
                        >
                            <div
                                v-for="(itemData, index) in itemType.dataList"
                                :key="index"
                                style="display: inline-block; width: 120px; margin: 5px"
                            >
                                <Tooltip
                                    max-width="200"
                                    :content="itemData.errorMsg"
                                    transfer
                                    theme="light"
                                    v-if="itemData.type"
                                    style="word-wrap: break-word"
                                >
                                    <span
                                        class="facityContainerStyle"
                                        :style="{
                                            border: '1px solid #e7e7f1',
                                            position: 'relative',
                                        }"
                                    >
                                        <ul class="facityContainerStyle_ul">
                                            <li style="text-align: center">
                                                <img
                                                    :src="getImageName(itemType.type)"
                                                    style="width: 40px"
                                                />
                                            </li>
                                            <li
                                                class="oLi"
                                                v-bind:title="itemData.name"
                                                style="text-align: center; font-size: 14px"
                                            >
                                                <span style="display: none">名称：</span
                                                >{{ itemData.name }}
                                            </li>
                                            <li
                                                class="oLi"
                                                v-bind:title="itemData.operation"
                                                style="margin: 5px 0px"
                                            >
                                                <span style="display: none">操作：</span
                                                ><span
                                                    style="
                                                        display: inline-block;
                                                        text-align: left;
                                                        width: 50%;
                                                        border-right: 1px solid #ddd;
                                                        padding-left: 10px;
                                                    "
                                                    >{{
                                                        deviedTypeSwitch(itemData.operation)
                                                    }}</span
                                                ><span
                                                    style="
                                                        display: inline-block;
                                                        text-align: right;
                                                        width: 50%;
                                                        padding-right: 10px;
                                                    "
                                                    >{{ itemData.time }}</span
                                                >
                                            </li>
                                            <!-- <li class="oLi" v-bind:title="itemData.time" style="text-align:right;width:50%;"><span style="display:none">用时：</span>{{itemData.time}}</li> -->
                                            <li
                                                class="oLi"
                                                v-bind:title="itemData.status"
                                                style="text-align: center"
                                            >
                                                <span style="display: none">状态：</span
                                                ><u
                                                    style="
                                                        display: inline-block;
                                                        border-radius: 10px;
                                                        background: #ed7c31;
                                                        color: #fff;
                                                        width: 90px;
                                                        text-align: center;
                                                        text-decoration: none;
                                                    "
                                                    >{{ deviedTypeSwitch(itemData.text) }}</u
                                                ><a
                                                    :style="{
                                                        display: 'inlieBlock',
                                                        background: itemData.color,
                                                        color: '#fff',
                                                    }"
                                                ></a>
                                            </li>
                                            <!-- <li><span>StartTime：</span>{{itemData.startTime}}</li> -->
                                            <!-- <li><span>EndTime：</span>{{itemData.stopTime}}</li> -->
                                            <!-- <li class="oLi" v-bind:title="itemData.vmType"><span>vmType</span>{{itemData.vmType}}</li><Time :time="itemData.time"  :interval="1"/> -->
                                        </ul>
                                        <div
                                            style="
                                                width: 98%;
                                                height: 100%;
                                                position: absolute;
                                                top: 0px;
                                                background: rgba(255, 255, 255, 0.8);
                                            "
                                            v-if="itemData.imgStatus"
                                        >
                                            <img
                                                src="../assets/deployLoding.gif"
                                                style="
                                                    position: absolute;
                                                    top: 0;
                                                    left: 0;
                                                    right: 0;
                                                    bottom: 0;
                                                    margin: auto;
                                                "
                                            />
                                        </div>
                                    </span>
                                </Tooltip>
                                <span
                                    class="facityContainerStyle"
                                    :style="{ border: '1px solid #e7e7f1', position: 'relative' }"
                                    v-else
                                >
                                    <ul class="facityContainerStyle_ul">
                                        <li style="text-align: center">
                                            <img
                                                :src="getImageName(itemType.type)"
                                                style="width: 40px"
                                            />
                                        </li>
                                        <li
                                            class="oLi"
                                            v-bind:title="itemData.name"
                                            style="text-align: center; font-size: 14px"
                                        >
                                            <span class=""></span
                                            ><span style="display: none">名称：</span
                                            >{{ itemData.name }}
                                        </li>
                                        <li
                                            class="oLi"
                                            v-bind:title="itemData.operation"
                                            style="margin: 5px 0px"
                                        >
                                            <span style="display: none">操作：</span
                                            ><span
                                                style="
                                                    display: inline-block;
                                                    text-align: left;
                                                    width: 50%;
                                                    border-right: 1px solid #ddd;
                                                    padding-left: 10px;
                                                "
                                                >{{ deviedTypeSwitch(itemData.operation) }}</span
                                            ><span
                                                style="
                                                    display: inline-block;
                                                    text-align: right;
                                                    width: 50%;
                                                    padding-right: 10px;
                                                "
                                                >{{ itemData.time }}</span
                                            >
                                        </li>
                                        <!-- <li class="oLi" v-bind:title="itemData.operation" style="text-align:center"><span class=""></span><span style="display:none">操作：</span>{{deviedTypeSwitch(itemData.operation)}}</li> -->
                                        <li
                                            class="oLi"
                                            v-bind:title="itemData.status"
                                            v-if="itemData.text == 'Success'"
                                            style="text-align: center"
                                        >
                                            <span
                                                class=""
                                                :style="{ background: itemData.color }"
                                            ></span
                                            ><span style="display: none">状态：</span
                                            ><u
                                                style="
                                                    display: inline-block;
                                                    border-radius: 10px;
                                                    color: #fff;
                                                    width: 90px;
                                                    text-align: center;
                                                    text-decoration: none;
                                                    background: #70ae46;
                                                "
                                                >{{ deviedTypeSwitch(itemData.text) }}</u
                                            ><a
                                                :style="{
                                                    display: 'inlieBlock',
                                                    background: itemData.color,
                                                    color: '#fff',
                                                }"
                                            ></a>
                                        </li>
                                        <li
                                            class="oLi"
                                            v-bind:title="itemData.status"
                                            v-if="itemData.text == 'Waiting'"
                                            style="text-align: center"
                                        >
                                            <span
                                                class=""
                                                :style="{ background: itemData.color }"
                                            ></span
                                            ><span style="display: none">状态：</span
                                            ><u
                                                style="
                                                    display: inline-block;
                                                    border-radius: 10px;
                                                    color: #fff;
                                                    width: 90px;
                                                    text-align: center;
                                                    text-decoration: none;
                                                "
                                                >{{ deviedTypeSwitch(itemData.text) }}</u
                                            ><a
                                                :style="{
                                                    display: 'inlieBlock',
                                                    background: itemData.color,
                                                    color: '#fff',
                                                }"
                                            ></a>
                                        </li>
                                        <li
                                            class="oLi"
                                            v-bind:title="itemData.status"
                                            v-if="itemData.text == 'Deploying'"
                                            style="text-align: center"
                                        >
                                            <span
                                                class=""
                                                :style="{ background: itemData.color }"
                                            ></span
                                            ><span style="display: none">状态：</span
                                            ><u
                                                style="
                                                    display: inline-block;
                                                    border-radius: 10px;
                                                    border: 1px solid #ddd;
                                                    color: #ddd;
                                                    width: 90px;
                                                    text-align: center;
                                                    text-decoration: none;
                                                "
                                                >{{ deviedTypeSwitch(itemData.text) }}</u
                                            ><a
                                                :style="{
                                                    display: 'inlieBlock',
                                                    background: itemData.color,
                                                    color: '#fff',
                                                }"
                                            ></a>
                                        </li>
                                        <!-- <li><span>StartTime：</span>{{itemData.startTime}}</li> -->
                                        <!-- <li><span>EndTime：</span>{{itemData.stopTime}}</li> -->
                                        <!-- <li class="oLi" v-bind:title="itemData.vmType"><span>vmType</span>{{itemData.vmType}}</li><Time :time="itemData.time"  :interval="1"/> -->
                                        <!-- <li class="oLi" v-bind:title="itemData.time" style="text-align:center"><span class=""></span><span style="display:none">用时：</span>{{itemData.time}}</li> -->
                                    </ul>
                                    <div
                                        style="
                                            width: 98%;
                                            height: 100%;
                                            position: absolute;
                                            top: 0px;
                                            background: rgba(255, 255, 255, 0.8);
                                        "
                                        v-if="itemData.imgStatus"
                                    >
                                        <img
                                            src="../assets/deployLoding.gif"
                                            style="
                                                position: absolute;
                                                top: 0;
                                                left: 0;
                                                right: 0;
                                                bottom: 0;
                                                margin: auto;
                                            "
                                        />
                                    </div>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- </div> -->
            </Modal>

            <Modal v-model="deployDataPanel" title="部署失败详情" width="80%">
                <div style="overflow: hidden">
                    <Button type="primary" @click="clearNetWorkVm">批量清空网卡</Button>
                    <Page
                        :total="deployDataPanelTotal"
                        show-sizer
                        :current="deployDataPanelCurrentPage"
                        :page-size="deployDataPanelItemPage"
                        :show-total="true"
                        @on-change="switchineDeployDataPanelCurrentPage"
                        @on-page-size-change="switchDeployDataPanelItemPage"
                        style="text-align: right; float: right"
                    />
                </div>
                <Table
                    border
                    ref=""
                    :columns="deployDataPanelClums"
                    :data="deployDataPanelData"
                    @on-selection-change="getSelectedTableItem"
                    stripe
                    show-header
                    size="small"
                ></Table>
            </Modal>
        </div>
    </div>
</template>

<script>
import this_$echarts from "@/libs/echart-import";
import axios from '@/libs/axios1.js';
import Axios from 'axios';
// import echarts from 'echarts'
// Vue.prototype.$echarts = echarts;
//  import sceneEntrance from '@/components/topologyDisplay/toposhow/sceneEntrance'
// import checkMenu from '@/libs/setMenu.js';
export default {
    name: 'sceneAndProject',
    inject: ['detailParent'],
    props: ['showType'],
    components: {
        // sceneEntrance
    },
    data() {
        return {
            autoHeight: 95,
            deployHeight: 200,
            currentPanelDeployId: '',
            deployContentHeight: 200,
            deployClums: [
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    maxWidth: 120,
                    // fixed:'left',
                    render: (h, params) => {
                        let status = params.row.deployStatus;
                        //  console.log(params.row)
                        let bgColor = null;
                        let actives = params.row.operation;
                        if (actives == 'deploy') {
                            actives = '部署';
                        } else if (actives == 'clear') {
                            actives = '清除';
                        } else if (actives == 'delete') {
                            actives = '删除';
                        } else {
                            actives = '';
                        }
                        if (params.row.deployStatus == -1) {
                            if (params.row.hasError) {
                                status = actives + '失败';
                                bgColor = '#ed4014';
                            } else {
                                status = actives + '成功';
                                bgColor = '#19be6b';
                            }
                        } else if (params.row.deployStatus == 0) {
                            status = actives + '成功';
                            bgColor = '#19be6b';
                        } else if (params.row.deployStatus == 1) {
                            status = actives + '进行中';
                            bgColor = '#ff9900';
                        }
                        return h('div', {}, [
                            h(
                                'span',
                                {
                                    style: {
                                        display: 'inline-block',
                                        width: '8px',
                                        height: '8px',
                                        borderRadius: '50%',
                                        position: 'relative',
                                        left: '-10px',
                                        background: bgColor,
                                    },
                                },
                                ''
                            ),
                            h('span', {}, status),
                        ]);
                        // return h('a',{
                        //     style:{
                        //         display:'inline-block',
                        //         background:bgColor,
                        //         width:'50px',
                        //         color:'#fff',
                        //     }
                        // },status)
                    },
                },
                // {
                //     title:'开始时间',
                //     key:'startTime',
                //     align:'center',
                //     // minWidth:100,
                //     render:(h,params)=>{
                //        return h('div',{},this.BASE.timestampToTime(params.row.startTime))
                //     }
                // },
                // {
                //     title:'结束时间',
                //     key:'stopTime',
                //     align:'center',
                //     width:150,
                //     render:(h,params)=>{
                //         if(!params.row.stopTime){
                //             return
                //         }
                //         return h('div',{},this.BASE.timestampToTime(params.row.stopTime))
                //     }
                // },
                {
                    title: '用时',
                    key: 'useTime',
                    align: 'center',
                    render: (h, params) => {
                        let _this = this;
                        //                      console.log(params);
                        if (!params.row.useTime) {
                            let time = this.formatSeconds(
                                (Date.parse(_this.currentTimeValue) -
                                    Date.parse(new Date(params.row.startTime))) /
                                    1000
                            );
                            return h(
                                'div',
                                {},
                                (time = Number(time.split('秒')[0]) < 0 ? '-' : time)
                            );
                        } else {
                            return h('div', {}, this.formatSeconds(params.row.useTime / 1000));
                        }
                    },
                },
                // {
                //     title:'操作人',
                //     key:'userName',
                //     align:'center',
                //     // minWidth:100,
                // },
                // {
                //     title:'靶场名称',
                //     key:'useTime',
                //     align:'center',
                //     // minWidth:100,
                //     render:(h,params)=>{
                //         let _this = this;
                //         // console.log(params);
                //         let text = '';
                //         if(params.row.ranges&&params.row.ranges.length>0){
                //             let ranges = params.row.ranges;
                //             for(let i = 0;i < ranges.length;i++){
                //                 let item = ranges[i];
                //                 if(i!=0) text+=','
                //                 text += item.rangeName;
                //             }
                //         }else{
                //             text = '-'
                //         }
                //         return h('div',{},text)
                //     }
                // },
                {
                    title: '操作',
                    key: '',
                    align: 'center',
                    width: 60,
                    // fixed:'right',
                    render: (h, params) => {
                        // console.log('----')
                        let deployId = params.row.id;
                        let dotColor = null;
                        if (this.deployId == deployId) {
                            dotColor = '#2d8cf0';
                        } else {
                            dotColor = '#dcdee2';
                        }
                        let _this = this;
                        return h(
                            'img',
                            {
                                attrs: {
                                    src: params.row.src,
                                },
                                style: {
                                    cursor: 'pointer',
                                },
                                on: {
                                    // hover(){
                                    //     params.row.src = "../assets/topoShow/operationh.png"
                                    // },
                                    mouseover() {
                                        // console.log("进入")
                                        params.row.src = require('../assets/topoShow/operationh.png');
                                    },
                                    mouseleave() {
                                        params.row.src = require('../assets/topoShow/operation.png');
                                    },
                                    click() {
                                        _this.currentPanelDeployId = params.row.id;
                                        if (!params.row.useTime) {
                                            // _this.deployDataDeatil.experTime = _this.formatSeconds((Date.parse(_this.currentTimeValue) - Date.parse(new Date(params.row.startTime)))/1000)
                                            _this.deployDataDeatil.experTime = '';
                                        } else {
                                            _this.deployDataDeatil.experTime = _this.formatSeconds(
                                                params.row.useTime / 1000
                                            );
                                        }
                                        let status = params.row.deployStatus;
                                        let bgColor = null;
                                        if (params.row.deployStatus == -1) {
                                            if (params.row.hasError) {
                                                status = '失败';
                                                bgColor = '#ed4014';
                                            } else {
                                                status = '成功';
                                                bgColor = '#19be6b';
                                            }
                                        } else if (params.row.deployStatus == 0) {
                                            status = '成功';
                                            bgColor = '#19be6b';
                                        } else if (params.row.deployStatus == 1) {
                                            status = '进行中';
                                            bgColor = '#ff9900';
                                        }
                                        _this.deployDataDeatil.text = status;
                                        _this.deployDataDeatil.bgColor = bgColor;
                                        _this.deployDataDeatil.startTime = _this.timestampToTime(
                                            params.row.startTime
                                        );
                                        _this.deployDataDeatil.craetor = params.row.userName;
                                        if (params.row.stopTime) {
                                            _this.deployDataDeatil.endTime = _this.timestampToTime(
                                                params.row.stopTime
                                            );
                                        } else {
                                            _this.deployDataDeatil.endTime = '-';
                                        }
                                        _this.deplogyPanel = true;
                                        //                                  _this.deployId = params.row.id;
                                        _this.isPanelBol = true;
                                        _this.panelBolList = [];
                                        _this.currentHistoryId = deployId;
                                        _this.getDeployRangeList(deployId);
                                    },
                                },
                            },
                            ''
                        );
                        // return h('div',{},[h('span',{
                        //     style:{
                        //         display: 'inline-block',
                        //         width: '10px',
                        //         height: '10px',
                        //         borderRadius: '50%',
                        //         position:'relative',
                        //         left:'-10px',
                        //         background:dotColor,
                        //     }
                        // },''),h('Button',{
                        //     props:{type:'primary',size:'small'},
                        //     on:{
                        //         click(){
                        //             if(!params.row.useTime){
                        //                 // _this.deployDataDeatil.experTime = _this.formatSeconds((Date.parse(_this.currentTimeValue) - Date.parse(new Date(params.row.startTime)))/1000)
                        //                 _this.deployDataDeatil.experTime = "";
                        //             }else{
                        //                 _this.deployDataDeatil.experTime = _this.formatSeconds(params.row.useTime/1000)
                        //             }
                        //             let status = params.row.deployStatus;
                        //             let bgColor =  null;
                        //             if(params.row.deployStatus==-1){
                        //                 if(params.row.hasError){
                        //                     status = "失败"
                        //                     bgColor = '#ed4014'
                        //                 }else{
                        //                     status = "成功"
                        //                     bgColor = '#19be6b'
                        //                 }
                        //             }else if(params.row.deployStatus==0){
                        //                 status = "成功"
                        //                 bgColor = '#19be6b'
                        //             }else if(params.row.deployStatus==1){
                        //                 status = "进行中"
                        //                 bgColor = "#ff9900"
                        //             }
                        //             _this.deployDataDeatil.text = status;
                        //             _this.deployDataDeatil.bgColor = bgColor;
                        //             _this.deployDataDeatil.startTime = _this.BASE.timestampToTime(params.row.startTime)
                        //             _this.deployDataDeatil.craetor = params.row.userName;
                        //             if(params.row.stopTime){
                        //                 _this.deployDataDeatil.endTime = _this.BASE.timestampToTime(params.row.stopTime);
                        //             }else{
                        //                 _this.deployDataDeatil.endTime = '-';
                        //             }

                        //             _this.deplogyPanel = true;
                        //             _this.deployId = params.row.id;
                        //             _this.getDataForDeployId(deployId)
                        //         }
                        //     }
                        // },'查看')])
                        // return h('Button',{
                        //     props:{type:'primary',size:'small'},
                        //     on:{
                        //         click(){
                        //             _this.getDataForDeployId(deployId)
                        //         }
                        //     }
                        // },'查看')
                    },
                },
            ],
            deployHistoryData: [],
            currentSceneId: null,
            spinShow: false,
            deplogyPanel: false,
            projectName: 'test',
            userName: 'fanguoming',
            // currentProjectId: '',
            currentNetworkId: '',
            btnSwitchTopo: 'primary',
            btnSwitchWorkflow: 'default',
            topologyShow: true,
            topologyWorkflow: false,
            canvasContainerHeight: '800px',
            projectStatus: '未部署',
            deployOpeartion: '',
            userImageSrc: '',
            contentHeight: '100px',
            deployHistoryTable: false,
            currentHistoryId: '',
            //部署展示
            deployData: [],
            isPanelBol: true,
            panelBolList: [],
            deployContentTypeDivHeight: '100px',
            deployContentTypeDivWidth: '',
            queryProjectTime: null, //部署工程时，校验定时器
            deploySettimeout: null, //部署进度定时器
            deployStatistics: [], //存放部署数据统计
            deployConfiged: 0, //等待中的
            deploySuccess: 0, //成功的
            deployError: 0, //失败的
            deployDoing: 0, //进行中的
            myChart2: null, //注册柱状图标
            myChart2oWidth: '',
            myChart3: null, //注册饼状图标
            myChart3oWidth: '',
            myChart1: null, //注册折现图
            myChart1oWidth: '',
            myChart3Data: [],
            myChart1DataS: [], //数据
            myChart1DataF: [], //数据
            myChart1DataI: [], //数据
            myChart1DataD: [], //数据
            myChart1DataTime: [], //时间轴
            deployId: null, //部署过程id
            projectProesss: '0%',
            showDeployRecordModal: false,
            deployHistoryData: [],
            deployDataPanel: false,
            deployDataPanelClums: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: '名称',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '类型',
                    key: 'type',
                    align: 'center',
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    render: (h, params) => {
                        let text = null;
                        if (params.row.status == 400) {
                            text = '失败';
                        }
                        return h('div', {}, text);
                    },
                },
                {
                    title: '操作',
                    key: 'operation',
                    align: 'center',
                    render: (h, params) => {
                        let text = null;
                        if (params.row.operation == 'create') {
                            text = '创建';
                        } else if (params.row.operation == 'delete') {
                            text = '删除';
                        } else {
                            text = '更新';
                        }
                        return h('div', {}, text);
                    },
                },
                // {
                //     title:'操作人',
                //     key:'userName',
                //     align:'center'
                // },
                {
                    title: '开始时间',
                    key: 'startTime',
                    align: 'center',
                },
                {
                    title: '结束时间',
                    key: 'stopTime',
                    align: 'center',
                },
                {
                    title: '错误信息',
                    key: 'errorMsg',
                    align: 'center',
                },
                {
                    title: '操作',
                    key: '',
                    align: 'center',
                    render: (h, params) => {
                        let _this = this;
                        params = params.row;
                        return h('div', {}, [
                            h(
                                'Poptip',
                                {
                                    props: {
                                        confirm: true,
                                        title: '您确定要清空此虚拟机网卡吗？',
                                        transfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            _this.storageVmId = [];
                                            _this.storageVmId.push(params.ndId);
                                            _this.clearNetWork();
                                        },
                                        'on-cancel': () => {},
                                    },
                                },
                                [
                                    h(
                                        'Button',
                                        {
                                            props: {
                                                type: 'error',
                                                size: 'small',
                                                disabled: params.type == 'VM' ? false : true,
                                            },
                                            style: {
                                                margin: '5px',
                                            },
                                        },
                                        '清空网卡'
                                    ),
                                ]
                            ),
                        ]);
                    },
                },
            ],
            deployDataPanelData: [],
            deployDataPanelTotal: 0,
            deployDataPanelCurrentPage: 1,
            deployDataPanelItemPage: 10,
            deployDataPanelDataPage: [],
            deviedType: '',
            canvasModel: true,
            projectInformationObj: {
                node: [],
                line: [],
                type: 'task',
                position: 'absolute',
                width: '50%',
                height: '70%',
                display: 'block',
                positionStatus: 'absolute',
                widthStatus: '50%',
                heightStatus: '70%',
                displayStatus: 'block',
            },
            currentPageMessage: 1,
            currentItemMessage: 10,
            containerTableHeight: '',
            deployProcessControl: 12, //页面元素显示的个数 --- 每种类型的最多个数 4n
            currentTimeValue: '',
            numbersDeplogy: 0,
            topoData: {
                deviceCount: 0,
                vmCount: 0,
                armCount: 0,
                partyCount: 0,
                netCount: 0,
                cpu: 0,
                disk: 0,
                ram: 0,
            },
            sceneData: {
                stepTotal: 0,
                taskTotal: 0,
                configSting: 0,
                interSting: 0,
                dataSting: 0,
                dataPer: 0,
                timePer: 0,
                userPer: 0,
            },
            topoDataNumber: {
                SG: 0,
                SN: 0,
                VM: 0,
                SW: 0,
                TSW: 0,
                P: 0,
                PHY: 0,
                IF: 0,
                VO: 0,
                TR: 0,
            },
            deployDataDeatil: {
                status: '',
                startTime: '',
                endTime: '',
                experTime: '',
                craetor: '',
                bgColor: '',
                text: '',
            },
            settimeC: null,
            storageVmId: [],
            // processControlIsShow
            processControlIsShow: true,
            deployDataSetTimeOut: null,
            rangeList: [],
            rangeId: '',
        };
    },
    computed: {
        contentDetail() {
            return this.detailParent.contentDetail;
        },
        currentProjectId() {
            return this.contentDetail.projectId;
        },
    },
    created() {
        // this.currentProjectId = this.$route.query.projectId;
        // this.getDeployHistory();
        this.numbersDeplogy++;
        this.projectName = this.parentToChildProjectName;
        this.myChart2oWidth = window.innerWidth * 0.8 * 0.2 + 'px';
        this.myChart3oWidth = window.innerWidth * 0.8 * 0.4 + 'px';
        this.myChart1oWidth = window.innerWidth * 0.8 * 0.34 + 'px';
        console.log(this.myChart2oWidth, this.myChart3oWidth, this.myChart1oWidth);
        this.deployContentTypeDivHeight = window.innerHeight - 250 - 10 - 51 - 27;
        this.containerTableHeight = (window.innerHeight - 50) * 0.7;
        this.deployHeight =
            window.innerHeight -
            70 -
            70 -
            56 -
            (this.autoHeight > 60 ? (95 + 20) * 6 : (60 + 10) * 6) -
            20;
        this.deployContentHeight = window.innerHeight - 51 - 16 - 250 - 134 + 'px';
        // // this.setintervalTime();
    },
    mounted() {
        this.myChart2 = this_$echarts.init(document.getElementById('myChart2'));
        // this.myChart3 = this_$echarts.init(document.getElementById('myChart3'))
        this.myChart1 = this_$echarts.init(document.getElementById('myChart1'));
        let _this = this;
        this.myChart2.on('click', function (param) {
            //          console.log(param)
            _this.deviedType = '';
            _this.deployDataPanelCurrentPage = 1;
            _this.deployDataPanel = true;
            _this.getErrorInformation(_this.currentPanelDeployId);
            // alert('点击了我！');
        });
        if (this.showType == '1') {
            this.getData();
        }
    },
    methods: {
        getData() {
            this.getTopoResource();
            this.getProjectStatic();
        },
        timestampToTime(timestamp) {
            const dateObj = new Date(+timestamp); // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
            const year = dateObj.getFullYear(); // 获取年，
            const month = dateObj.getMonth() + 1; // 获取月，必须要加1，因为月份是从0开始计算的
            const date = dateObj.getDate(); // 获取日，记得区分getDay()方法是获取星期几的。
            const hours = this.pad(dateObj.getHours()); // 获取时, pad函数用来补0
            const minutes = this.pad(dateObj.getMinutes()); // 获取分
            const seconds = this.pad(dateObj.getSeconds()); // 获取秒
            return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
        },
        pad(str) {
            return +str >= 10 ? str : '0' + str;
        },
        formatSeconds(value) {
            var theTime = parseInt(value); // 秒
            var middle = 0; // 分
            var hour = 0; // 小时
            if (theTime > 60) {
                middle = parseInt(theTime / 60);
                theTime = parseInt(theTime % 60);
                if (middle > 60) {
                    hour = parseInt(middle / 60);
                    middle = parseInt(middle % 60);
                }
            }
            var result = '' + parseInt(theTime) + '秒';
            if (middle > 0) {
                result = '' + parseInt(middle) + '分' + result;
            }
            if (hour > 0) {
                result = '' + parseInt(hour) + '小时' + result;
            }
            return result;
        },
        switchRange(val) {
            this.rangeId = val;
            this.deployData = [];
            this.myChart1DataTime = [];
            this.myChart1DataS = [];
            this.myChart1DataF = [];
            this.myChart1DataI = [];
            this.myChart1DataD = [];
            this.getDataForDeployId(this.currentHistoryId);
        },
        getDeployRangeList(id = '') {
            let _this = this;
            let current = id ? id : this.deployId;
            _this.rangeList = [];
            axios({
                url: 'topo-edit/projects/' + _this.currentProjectId + '/ranges?deployId=' + current,
            }).then((res) => {
                if (res.code == 1) {
                    _this.rangeList = res.data;
                    if (res.data.length > 0) {
                        _this.rangeId = res.data[0].rangeId;
                        _this.deployData = [];
                        _this.myChart1DataTime = [];
                        _this.myChart1DataS = [];
                        _this.myChart1DataF = [];
                        _this.myChart1DataI = [];
                        _this.myChart1DataD = [];
                        _this.getDataForDeployId(current);
                    }
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        clearNetWorkVm() {
            let _this = this;
            if (_this.storageVmId.length == 0) {
                this.$Message.info('请选择要清空网卡的虚拟机');
                return;
            }
            this.$Modal.confirm({
                title: '清空',
                content: '您确定要清空这些虚拟机的网卡吗？',
                onOk: () => {
                    _this.clearNetWork();
                },
                onCancel: () => {},
            });
        },
        clearNetWork() {
            let _this = this;
            axios({
                url: 'topo-edit/projects/' + this.currentProjectId + '/vms/destroy',
                method: 'POST',
                data: _this.storageVmId,
            }).then((response) => {
                if (response.code == 1) {
                    _this.$Message.success('清空中');
                    this.storageVmId = [];
                    _this.getErrorInformation(_this.currentPanelDeployId);
                } else {
                    _this.$Message.error(response.message);
                    // this.storageVmId = [];
                }
            });
        },
        getSelectedTableItem(selection) {
            this.storageVmId = [];
            selection.forEach((item,idx) => {
                if (item.type == 'VM') {
                    this.storageVmId.push(item.ndId);
                }
            });
            //  = selection

            console.log(this.storageVmId);
        },
        shrinkPanel(value) {
            this.$set(this.panelBolList, value, !this.panelBolList[value]);
            // if(value.panelBol){
            //     value.icon = "ios-arrow-forward"
            // }else{
            //     value.icon = "ios-arrow-down"
            // }

            // console.log(value)
            // console.log("-----")
        },
        //拓扑设备使用情况
        getProjectStatic() {
            axios({
                url: 'topo-edit/statistics/projects/' + this.currentProjectId + '/resource/count',
            }).then((response) => {
                if (response.code == 1) {
                    this.topoData.deviceCount = response.data.deviceCount;
                    this.topoData.vmCount = response.data.vmCount;
                    this.topoData.armCount = response.data.armCount;
                    this.topoData.partyCount = response.data.partyCount;
                    this.topoData.netCount = response.data.netCount;
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        //工程资源情况
        getTopoResource() {
            axios({
                url: 'topo-edit/projects/' + this.currentProjectId + '/flavors/used',
            }).then((response) => {
                if (response.code == 1) {
                    this.topoData.cpu = response.data.vcpu;
                    this.topoData.ram = response.data.ram;
                    this.topoData.disk = response.data.disk;
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        getSecneData() {},
        showDeployRecord() {
            this.showDeployRecordModal = true;
            this.getDeployHistory();
        },
        getDeployHistory() {
            let _this = this;
            axios({
                // url:"deploy/project/"+this.currentProjectId+"/records",
                url:
                    'topo-edit/projects/' +
                    this.currentProjectId +
                    '/deploy/records?pageIndex=1&pageSize=100000',
            }).then((response) => {
                if (response.code == 1) {
                    _this.currentTimeValue = response.resHeader.date;
                    this.deployHistoryData = [];
                    if (response.data.items.length == 0) {
                        return;
                    }
                    _this.deployId = response.data.items[0].id;
                    for (let i = 0; i < response.data.items.length; i++) {
                        response.data.items[i][
                            'src'
                        ] = require('../assets/topoShow/operation.png');
                        _this.deployHistoryData.push(response.data.items[i]);
                    }
                    // this.deployHistoryData = response.data.map((item)=>{
                    //     item['src'] = "../assets/topoShow/operation.png"
                    //     return item;
                    // });
                    if (this.deployHistoryData[0].useTime) {
                        _this.deployDataDeatil.experTime = _this.formatSeconds(
                            this.deployHistoryData[0].useTime / 1000
                        );
                        let status = _this.deployHistoryData[0].deployStatus;
                        let bgColor = null;
                        if (_this.deployHistoryData[0].deployStatus == -1) {
                            if (_this.deployHistoryData[0].hasError) {
                                status = '失败';
                                bgColor = '#ed4014';
                            } else {
                                status = '成功';
                                bgColor = '#19be6b';
                            }
                        } else if (_this.deployHistoryData[0].deployStatus == 0) {
                            status = '成功';
                            bgColor = '#19be6b';
                        } else if (_this.deployHistoryData[0].deployStatus == 1) {
                            status = '进行中';
                            bgColor = '#ff9900';
                        }
                        _this.deployDataDeatil.text = status;
                        _this.deployDataDeatil.bgColor = bgColor;
                        _this.deployDataDeatil.startTime = _this.timestampToTime(
                            _this.deployHistoryData[0].startTime
                        );
                        _this.deployDataDeatil.craetor = _this.deployHistoryData[0].userName;
                        _this.deployDataDeatil.endTime = _this.timestampToTime(
                            _this.deployHistoryData[0].stopTime
                        );
                    }
                    // console.log($('#deplogyHistory table tbody>tr').eq(0).find('td').css('background','#f6fafe'))
                    setTimeout(() => {
                        // console.log($('#deplogyHistory table tbody>tr').eq(0).find('td').length)
                        // console.log($('#deplogyHistory table tbody>tr').eq(0).find('td').text)
                        // $('#deplogyHistory table tbody>tr')
                        //     .eq(0)
                        //     .find('td')
                        //     .css('background', '#f6fafe');
                        // $('#deplogyHistory table tbody tr')
                        //     .eq(0)
                        //     .addClass('ivu-table-row');
                    }, 1000);
                } else {
                    if (response.code != -2) {
                        _this.$Message.error(response.message || '请求失败');
                    }
                }
            });
        },
        //初始化Echart
        drawLine() {
            // console.log("====")
            let _this = this;
            // console.log(this.myChart3Data)
            // 基于准备好的dom，初始化echarts实例
            // let myChart = echarts.init(document.getElementById('myChart'))
            // console.log(this.myChart1DataI);
            // console.log(this.myChart1DataD);
            this.myChart1.setOption({
                // title: {
                //     text: '部署实况'
                // },
                tooltip: {
                    trigger: 'axis',
                },
                // legend: {
                //     data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                // },
                grid: {
                    left: '3%',
                    right: '7%',
                    bottom: '3%',
                    top: '8%',
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        // saveAsImage: {}
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: _this.myChart1DataTime,
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '成功的',
                        type: 'line',
                        data: _this.myChart1DataS, //数据
                    },
                    {
                        name: '失败的',
                        type: 'line',
                        data: _this.myChart1DataF,
                    },
                    {
                        name: '进行中的',
                        type: 'line',
                        data: _this.myChart1DataI,
                    },
                    {
                        name: '等待中的',
                        type: 'line',
                        data: _this.myChart1DataD,
                    },
                ],
            });
            // this.myChart3.setOption({
            //     // title : {
            //     //     text: '部署内容',
            //     //     // subtext: '纯属虚构',
            //     //     x:'center'
            //     // },
            //     tooltip : {
            //         trigger: 'item',
            //         formatter: "{b} : {c} ({d}%)"
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '0%',
            //         bottom: '6%',
            //         containLabel: true
            //     },
            //     legend: {
            //         orient: 'vertical',
            //         left: 'left',
            //         // data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            //     },
            //     series : [
            //         {
            //             // name: '工程名:'+_this.projectName,
            //             type: 'pie',
            //             radius : '55%',
            //             center: ['50%', '60%'],
            //             data:_this.myChart3Data,
            //             itemStyle: {
            //                 normal: {
            //                     show: false,
            //                     position: 'center'
            //                 },
            //                 emphasis: {
            //                     shadowBlur: 10,
            //                     shadowOffsetX: 0,
            //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //                 }
            //             }
            //         }
            //     ]
            // })
            this.myChart2.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)',
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    // data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                    data: [],
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '6%',
                    containLabel: true,
                },
                // color:['#ddd','#0f0','#f00'],
                color: ['#ED1C24', '#3d52c9', '#ddd'],
                title: {
                    text: _this.projectProesss,
                    left: 'center',
                    top: '45%',
                    // padding:[24,0],
                    textStyle: {
                        color: '#031f2d',
                        fontSize: 26,
                        align: 'center',
                    },
                },
                series: [
                    {
                        // name:'工程名:'+_this.projectName,
                        // name:'',
                        type: 'pie',
                        radius: ['50%', '60%'],
                        avoidLabelOverlap: true,
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold',
                                },
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: [
                            { value: _this.deployError, name: '失败的' },
                            { value: _this.deploySuccess, name: '成功的' },
                            { value: _this.deployConfiged, name: '等待中' },
                        ],
                    },
                ],
            });
        },
        projectDeployListen(value) {
            if (value) {
                this.getProjectDeployData();
                this.getDeployHistory();
            } else {
                this.deployHistoryTable = false;
            }
        },
        getErrorInformation(deployId) {
            if (!deployId) {
                return;
            }
            let _url = null;
            if (this.deviedType) {
                _url =
                    'topo-edit/projects/' +
                    this.currentProjectId +
                    '/deploy/' +
                    deployId +
                    '/detail?rangeId=' +
                    this.rangeId +
                    '&type=' +
                    this.deviedType +
                    '&status=400';
            } else {
                _url =
                    'topo-edit/projects/' +
                    this.currentProjectId +
                    '/deploy/' +
                    deployId +
                    '/detail?rangeId=' +
                    this.rangeId +
                    '&status=400';
            }
            axios({
                url: _url,
                params: {
                    pageIndex: this.deployDataPanelCurrentPage,
                    pageSize: this.deployDataPanelItemPage,
                },
            }).then((response) => {
                if (response.code == 1) {
                    this.deployDataPanelData = [];
                    this.deployDataPanelTotal = response.data.total;
                    this.deployDataPanelData = response.data.items;
                } else {
                    this.$Message.error(response.message);
                }
            });
        },

        getDataForDeployId(deployId) {
            clearTimeout(this.deployDataSetTimeOut);
            let _this = this;
            axios({
                // url:"deploy/deploying/"+deployId+"/summary?pageSize="+this.deployProcessControl,
                url:
                    'topo-edit/projects/' +
                    _this.currentProjectId +
                    '/deploy/' +
                    deployId +
                    '/summary?rangeId=' +
                    _this.rangeId +
                    '&pageSize=' +
                    _this.deployProcessControl,
            }).then(async (response) => {
                if (response.code == 1) {
                    let _time = null;
                    // let res = await Axios({
                    //     type: 'GET',
                    //     url: '/api/topo-edit/parties?pageIndex=1&pageSize=1&test=' + Math.random()
                    //     // async: false,
                    //     // complete: function(x) {
                    //     //     _time = x.getResponseHeader('Date');
                    //     //     _this.currentTimeValue = _time;
                    //     // }
                    // });
                    _time = response.resHeader.date; //res.getResponseHeader('Date');
                    _this.currentTimeValue = _time;
                    let dataDetail = response.data.summary; //数据
                    let process = response.data.process; //进度
                    //数据处理
                    let typeGroup = [];
                    let facitlyType = null;
                    _this.myChart3Data = [];
                    this.projectProesss = process + '%';
                    for (let i in dataDetail) {
                        if (i != 'PROJECT') {
                            let obj = {};
                            _this.myChart3Data.push({
                                value: 0,
                                name: _this.deviedTypeSwitch(i),
                            });
                            let statusTotal_s = 0;
                            let statusTotal_f = 0;
                            let statusTotal_i = 0;
                            let statusTotal_r = 0;
                            obj['deployContentTypeDivWidth'] = '560px';
                            obj['deployContentTitleWidth'] = '180px';
                            obj['successPro'] = 0;
                            obj['errorPro'] = 0;
                            obj['type'] = i;
                            obj['dataList'] = [];
                            // obj['panelBol'] = true;
                            if (_this.isPanelBol) {
                                _this.panelBolList.push(true);
                            }
                            obj['icon'] = 'os-arrow-down';
                            obj['static'] = {
                                type: i,
                                success: 0,
                                failed: 0,
                                doing: 0,
                                configed: 0,
                            };
                            for (let j in dataDetail[i]) {
                                if (j == 400) {
                                    //失败
                                    for (
                                        let index = 0;
                                        index < dataDetail[i][j].items.length;
                                        index++
                                    ) {
                                        const element = dataDetail[i][j].items[index];
                                        let detailObj = {};
                                        obj['static'].failed = dataDetail[i][j].total;
                                        detailObj['color'] = '#ed4014';
                                        detailObj.text = 'Failure';
                                        detailObj['name'] = element.name;
                                        detailObj['operation'] = element.operation;
                                        detailObj['bg'] = '#ED7C30';
                                        detailObj['errorMsg'] = element.errorMsg;
                                        detailObj['type'] = true;
                                        if (element.stopTime && element.startTime) {
                                            detailObj['time'] = _this.formatSeconds(
                                                (Date.parse(new Date(element.stopTime)) -
                                                    Date.parse(new Date(element.startTime))) /
                                                    1000
                                            );
                                        } else {
                                            detailObj['time'] = '-';
                                        }
                                        obj.dataList.push(detailObj);
                                    }
                                    _this.myChart3Data[_this.myChart3Data.length - 1].value +=
                                        dataDetail[i][j].total;
                                    statusTotal_f = dataDetail[i][j].total;
                                } else if (j == 200) {
                                    //成功
                                    for (
                                        let index = 0;
                                        index < dataDetail[i][j].items.length;
                                        index++
                                    ) {
                                        const element = dataDetail[i][j].items[index];
                                        let detailObj = {};
                                        obj['static'].success = dataDetail[i][j].total;
                                        detailObj['color'] = '#19be6b';
                                        detailObj.text = 'Success';
                                        detailObj['name'] = element.name;
                                        detailObj['operation'] = element.operation;
                                        detailObj['bg'] = ''; //19be6b
                                        if (element.stopTime && element.startTime) {
                                            detailObj['time'] = _this.formatSeconds(
                                                (Date.parse(new Date(element.stopTime)) -
                                                    Date.parse(new Date(element.startTime))) /
                                                    1000
                                            );
                                        } else {
                                            detailObj['time'] = '-';
                                        }
                                        obj.dataList.push(detailObj);
                                    }
                                    _this.myChart3Data[_this.myChart3Data.length - 1].value +=
                                        dataDetail[i][j].total;
                                    statusTotal_s = dataDetail[i][j].total;
                                } else if (j == 1) {
                                    //进行中
                                    for (
                                        let index = 0;
                                        index < dataDetail[i][j].items.length;
                                        index++
                                    ) {
                                        const element = dataDetail[i][j].items[index];
                                        let detailObj = {};
                                        obj['static'].doing = dataDetail[i][j].total;
                                        detailObj['color'] = '#c5c8ce';
                                        detailObj.text = 'Deploying';
                                        detailObj['name'] = element.name;
                                        detailObj['operation'] = element.operation;
                                        detailObj['bg'] = ''; //2db7f5
                                        if (element.startTime) {
                                            detailObj['time'] = _this.formatSeconds(
                                                (Date.parse(new Date(_time)) -
                                                    Date.parse(new Date(element.startTime))) /
                                                    1000
                                            );
                                        } else {
                                            detailObj['time'] = '-';
                                        }
                                        obj.dataList.push(detailObj);
                                    }
                                    _this.myChart3Data[_this.myChart3Data.length - 1].value +=
                                        dataDetail[i][j].total;
                                    statusTotal_i = dataDetail[i][j].total;
                                } else {
                                    //准备中的
                                    for (
                                        let index = 0;
                                        index < dataDetail[i][j].items.length;
                                        index++
                                    ) {
                                        const element = dataDetail[i][j].items[index];
                                        let detailObj = {};
                                        obj['static'].configed = dataDetail[i][j].total;
                                        detailObj['color'] = '#2d8cf0';
                                        detailObj.text = 'Waiting';
                                        detailObj['name'] = element.name;
                                        detailObj['operation'] = element.operation;
                                        detailObj['time'] = 0;
                                        detailObj['bg'] = ''; //f8f8f9
                                        obj.dataList.push(detailObj);
                                    }
                                    _this.myChart3Data[_this.myChart3Data.length - 1].value +=
                                        dataDetail[i][j].total;
                                    statusTotal_r = dataDetail[i][j].total;
                                }
                            }
                            obj['errorPro'] = parseInt(
                                (statusTotal_s /
                                    (statusTotal_f +
                                        statusTotal_s +
                                        statusTotal_r +
                                        statusTotal_i)) *
                                    100
                            );
                            obj['successPro'] = parseInt(
                                ((statusTotal_s + statusTotal_f) /
                                    (statusTotal_f +
                                        statusTotal_s +
                                        statusTotal_r +
                                        statusTotal_i)) *
                                    100
                            );
                            typeGroup.push(obj);
                        }
                    }
                    _this.isPanelBol = false;
                    let arrs = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
                    let arr = [
                        { type: 'SG', index: 0 },
                        { type: 'SN', index: 1 },
                        { type: 'TSW', index: 2 },
                        { type: 'SW', index: 3 },
                        { type: 'VM', index: 4 },
                        { type: 'P', index: 5 },
                        { type: 'TR', index: 6 },
                        { type: 'VO', index: 7 },
                        { type: 'IF', index: 8 },
                        { type: 'PHY', index: 9 },
                        { type: 'FW', index: 10 },
                        { type: 'FP', index: 11 },
                        { type: 'FR', index: 12 },
                        { type: 'FI', index: 13 },
                        { type: 'PF', index: 14 },
                    ];
                    for (let index = 0; index < typeGroup.length; index++) {
                        const element = typeGroup[index];
                        for (let i = 0; i < arr.length; i++) {
                            if (arr[i].type == element.type) {
                                arrs[arr[i].index] = element;
                            }
                        }
                    }
                    _this.deployData = arrs;
                    for (let i = 0; i < _this.deployData.length; i++) {
                        if (JSON.stringify(_this.deployData[i]) != '{}') {
                            _this.topoDataNumber[_this.deployData[i].type] =
                                _this.deployData[i].static.configed +
                                _this.deployData[i].static.success +
                                _this.deployData[i].static.doing +
                                _this.deployData[i].static.failed;
                        } else {
                            _this.deployData.splice(i, 1);
                            i--;
                        }
                    }
                    _this.deployConfiged = response.data.percent['0'];
                    _this.deploySuccess = response.data.percent['200'];
                    _this.deployError = response.data.percent['400'];
                    _this.deployDoing = response.data.percent['1'];
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    var hour = date.getHours();
                    var minute = date.getMinutes();
                    var second = date.getSeconds();
                    if (_this.myChart1DataTime.length < 5) {
                        _this.myChart1DataTime.push(hour + ':' + minute + ':' + second);
                        _this.myChart1DataS.push(_this.deploySuccess);
                        _this.myChart1DataF.push(_this.deployError);
                        _this.myChart1DataI.push(_this.deployDoing);
                        _this.myChart1DataD.push(_this.deployConfiged);
                    } else {
                        _this.myChart1DataTime.shift();
                        _this.myChart1DataS.shift();
                        _this.myChart1DataF.shift();
                        _this.myChart1DataI.shift();
                        _this.myChart1DataD.shift();
                        _this.myChart1DataTime.push(hour + ':' + minute + ':' + second);
                        _this.myChart1DataS.push(_this.deploySuccess);
                        _this.myChart1DataF.push(_this.deployError);
                        _this.myChart1DataI.push(_this.deployDoing);
                        _this.myChart1DataD.push(_this.deployConfiged);
                    }

                    this.drawLine();
                    // this.$parent.getProjectStatus()
                    if (process != 100) {
                        //部署中
                        _this.deployDataSetTimeOut = setTimeout(() => {
                            _this.getDataForDeployId(deployId);
                        }, 2000);
                    } else {
                        //部署完毕
                    }
                } else if (response.code == -2) {
                    _this.deployDataSetTimeOut = setTimeout(() => {
                        _this.getDataForDeployId(deployId);
                    }, 1000);
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        getProjectDeployData(currentDeployId = '') {
            let _this = this;
            clearTimeout(this.deploySettimeout);
            if (currentDeployId) {
                _this.deployId = currentDeployId;
            }
            axios({
                // url:_projPath_deploy +"deploy/project/"+this.currentProjectId+"/summary",//粗略信息
                // url:"deploy/deploying/"+_this.deployId+"/summary?pageSize="+this.deployProcessControl,//详细信息
                url: 'topo-edit/deploy/' + _this.deployId + '/record',
            }).then((response) => {
                if (response.code == 1) {
                    // let dataDetail = response.data.summary;//数据
                    let process = response.data.process; //进度
                    let _time = null;
                    // $.ajax({
                    //     type: 'GET',
                    //     url: '/api/topo-edit/parties?pageIndex=1&pageSize=1&test=' + Math.random(),
                    //     async: false,
                    //     complete: function(x) {
                    //         _time = x.getResponseHeader('Date');
                    //         _this.currentTimeValue = _time;
                    //     }
                    // });
                    _time = response.resHeader.date; //res.getResponseHeader('Date');
                    _this.currentTimeValue = _time;
                    //通过进度判断工程状态，减少请求
                    if (process != 100) {
                        //部署中
                        _this.getDeployHistory();
                        this.deploySettimeout = setTimeout(() => {
                            this.getProjectDeployData();
                        }, 2000);
                        if (response.data.canceled) {
                            _this.$emit('projectDeployProcess', {
                                deployProcess: process,
                                deployProcessBol: true,
                                statusCode: 999,
                            });
                        } else {
                            _this.$emit('projectDeployProcess', {
                                deployProcess: process,
                                deployProcessBol: true,
                            });
                        }

                        // this.getProjectStatus()
                    } else {
                        //部署完毕
                        this.getDeployHistory();
                        _this.$emit('projectDeployProcess', {
                            deployProcess: process,
                            deployProcessBol: false,
                        });
                        _this.$parent.getProjectStatus();
                        //查询部署历史记录，更新小面板信息
                    }
                    if (_this.currentPanelDeployId != _this.deployId) {
                        return;
                    }
                    _this.deployId = response.data.deployId; //获取部署ID
                    if (_this.numbersDeplogy == 1) {
                        _this.getDeployHistory();
                    }
                } else if (response.code == -2) {
                    this.getDeployHistory();
                    this.deploySettimeout = setTimeout(() => {
                        this.getProjectDeployData();
                    }, 1000);
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        getDataListError(value) {
            let _this = this;
            _this.deployDataPanelCurrentPage = 1;
            this.deviedType = value;
            _this.deployDataPanel = true;
            _this.getErrorInformation(_this.currentPanelDeployId);
        },
        switchineDeployDataPanelCurrentPage(Currentpage) {
            this.deployDataPanelCurrentPage = Currentpage;
            //          console.log(this.deployDataPanelCurrentPage)
            this.getErrorInformation(this.currentPanelDeployId);
        },
        switchDeployDataPanelItemPage(itemPage) {
            this.deployDataPanelItemPage = itemPage;
            this.getErrorInformation(this.currentPanelDeployId);
        },
        deviedTypeSwitch(type) {
            let typePanel = null;
            switch (type) {
                case 'P':
                    typePanel = '端口';
                    break;
                case 'PHY':
                    typePanel = '物理设备';
                    break;
                case 'SG':
                    typePanel = '网络';
                    break;
                case 'SW':
                    typePanel = '交换机';
                    break;
                case 'TSW':
                    typePanel = '三层交换机';
                    break;
                case 'SN':
                    typePanel = '子网';
                    break;
                case 'VM':
                    typePanel = '虚拟机';
                    break;
                case 'TR':
                    typePanel = '传输配置';
                    break;
                case 'VO':
                    typePanel = '附加磁盘';
                    break;
                case 'IF':
                    typePanel = '流量镜像';
                    break;
                case 'delete':
                    typePanel = '删除';
                    break;
                case 'create':
                    typePanel = '创建';
                    break;
                case 'update':
                    typePanel = '更新';
                    break;
                case 'Success':
                    typePanel = 'Success';
                    break;
                case 'Failure':
                    typePanel = 'Failure';
                    break;
                case 'Deploying':
                    typePanel = 'Deploying';
                    break;
                case 'Waiting':
                    typePanel = 'Waiting';
                    break;
                default:
                    typePanel = type;
                    break;
            }
            return typePanel;
        },
        getImageName(type) {
            let typePanel = null;
            switch (type) {
                case 'P':
                    typePanel = require('../assets/topoShow/port2.png');
                    break;
                case 'PHY':
                    typePanel = require('../assets/topoImage/P_D_PMC_0.png');
                    break;
                case 'SG':
                    typePanel = require('../assets/topoImage/V_D_NW_0.png');
                    break;
                case 'SW':
                    typePanel = require('../assets/topoImage/V_D_SW_0.png');
                    break;
                case 'TSW':
                    typePanel = require('../assets/topoImage/V_D_TSW_0.png');
                    break;
                case 'SN':
                    typePanel = require('../assets/topoImage/V_D_VC_0.png');
                    break;
                case 'VM':
                    typePanel = require('../assets/topoImage/V_D_VMC_0.png');
                    break;
                case 'TR':
                    typePanel = require('../assets/topoShow/cspz.png');
                    break;
                case 'VO':
                    typePanel = require('../assets/topoShow/fjcp.png');
                    break;
                case 'IF':
                    typePanel = require('../assets/topoShow/lljx.png');
                    break;
                case 'delete':
                    typePanel = '删除';
                    break;
                case 'create':
                    typePanel = '创建';
                    break;
                case 'update':
                    typePanel = '更新';
                    break;
                case 'Success':
                    typePanel = 'Success';
                    break;
                case 'Failure':
                    typePanel = 'Failure';
                    break;
                case 'Deploying':
                    typePanel = 'Deploying';
                    break;
                case 'Waiting':
                    typePanel = 'Waiting';
                    break;
                default:
                    typePanel = type;
                    break;
            }
            return typePanel;
        },
        setintervalTime() {
            let _this = this;
            this.settimeC = setInterval(function () {
                fnDate();
            }, 1000);
            //js 获取当前时间
            function fnDate() {
                $.ajax({
                    type: 'GET',
                    url: '/',
                    complete: function (x) {
                        // console.log(x.getResponseHeader("Date"));
                        let _time = x.getResponseHeader('Date');
                        var date = new Date(_time);
                        var year = date.getFullYear(); //当前年份
                        var month = date.getMonth(); //当前月份
                        var data = date.getDate(); //天
                        var hours = date.getHours(); //小时
                        var minute = date.getMinutes(); //分
                        var second = date.getSeconds(); //秒
                        var time =
                            year +
                            '-' +
                            fnW(month + 1) +
                            '-' +
                            fnW(data) +
                            ' ' +
                            fnW(hours) +
                            ':' +
                            fnW(minute) +
                            ':' +
                            fnW(second);
                        // oDiv.innerHTML=time;
                        _this.currentTimeValue = time;
                        console.log(time);
                    },
                });

                // axios({
                //     url:'/topo/project/'+_this.currentProjectId,
                //     // methods:'options'
                // }).then((response)=>{
                //     console.log(response.getResponseHeader("Date"))

                // })
            }
            //补位 当某个字段不是两位数时补0
            function fnW(str) {
                var num;
                str >= 10 ? (num = str) : (num = '0' + str);
                return num;
            }
        },
        getSceneData(sceneId) {
            this.currentSceneId = sceneId;
            axios({
                url: 'process/tests/' + sceneId + '/editor',
            }).then((response) => {
                //          	console.log(response);
                if (response.code == 1) {
                    let data = response.data.nodes;
                    this.sceneData.stepTotal = data.length;
                } else {
                    this.$Message.error(response.message);
                }
            });
            axios({
                url: 'process/overview/task/countByTaskType?testId=' + sceneId,
            }).then((response) => {
                if (response.code == 1) {
                    this.sceneData.configSting =
                        response.data.access +
                        response.data.vm_metadata +
                        response.data.qga_write +
                        response.data.qga_execute_cmd +
                        response.data.once_server_flag +
                        response.data.once_configure_flag +
                        response.data.stop_task;
                    this.sceneData.interSting =
                        response.data.once_submit_flag +
                        response.data.once_report +
                        response.data.customize;
                    this.sceneData.dataSting = response.data.qga_read + response.data.once_capture;
                    this.sceneData.dataPer = response.data.mirror_flow + response.data.tunnel;
                    this.sceneData.timePer =
                        response.data.qga_loop_read +
                        response.data.loop_configure_flag +
                        response.data.loop_capture +
                        response.data.checker;
                    this.sceneData.userPer =
                        response.data.loop_submit_flag + response.data.loop_report;
                    this.sceneData.taskTotal =
                        this.sceneData.configSting +
                        this.sceneData.interSting +
                        this.sceneData.dataSting +
                        this.sceneData.dataPer +
                        this.sceneData.timePer +
                        this.sceneData.userPer;
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
    },
    watch: {
        parentToChildSceneAndProjectData: {
            immediate: true,
            handler(val) {
                this.currentSceneId = val;
            },
        },

        // parentToChildSceneAndProjectData:(n,o)=>{//箭头函数  不然会发生this改变
        //     console.log(n)
        //     // console.log(o)
        //     // this.currentSceneId = n;
        //     return n;
        //     console.log("子组件接收到了~~~~")
        // },
        //      parentToChildSceneAndProjectData(a){
        // console.log(a);

        //      },
        // 'parentToChildSceneAndProjectData':{
        //     handler:(newValue,oldValue)=>{
        //         console.log(newValue)
        //         // console.log(oldValue)
        //         let _this = this;
        //         this.currentSceneId = newValue;
        //         // this.dosomething()
        //         console.log("子组件接收到了")
        //         axios({
        //             url:"process/tests/"+newValue+"/editor",
        //         }).then((response)=>{
        //             console.log(response)
        //             if(response.code==1){
        //                 // console.log("----")
        //                 let data = response.data.nodes;
        //                 if(data.length!=0){
        //                     _this.sceneData.stepTotal = 9
        //                     _this.sceneData.taskTotal = 2
        //                     _this.sceneData.configSting = 1
        //                     _this.sceneData.dataSting = 2
        //                 }
        //             }else{
        //                 this.$Message.error(response.message)
        //             }
        //         })
        //         // return newValue;
        //         // this.dosomething(newValue)
        //     },
        //     // immediate:true,
        //     deep:true
        // },
    },
};
</script>
<style scoped>
.modalLi {
    padding: 10px 20px;
    width: 234px;
    background: var(--card-body-bgcolor);
    position: relative;
    border: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    flex: 0 1 180px;
}
.modalLi .count {
    display: flex;
    flex-direction: column;
    margin-left: 30px;
}
.outlineStyle {
    display: flex;
    width: 100%;
    overflow: hidden;
    list-style: none;
    flex-wrap: wrap;
    /* min-width: 1152px; */
}
.outlineStyle span {
    display: inline-block;
}
.oDiv {
    /* text-align: left;
    width: 234px;
    position: relative; */
}
.oImage {
    /* position: absolute;
    left: 20px;
    top: 0px;
    bottom: 0px;
    margin: auto 0; */
}
.numberTop {
    /* position: absolute;
    bottom: 20px;
    left: 100px;
    font-size: 22px;
    font-family: 'YouSheBiaoTiHei';
    color: #dc7a23; */
    color: #dc7a23;
    font-size: 22px;
    font-family: 'YouSheBiaoTiHei';
}
.textBottom {
    /* position: absolute;
    top: 20px;
    left: 100px;
    color: #333; */
    color: var(--default-color);
}
.modalTitle {
    text-align: left;
    font-size: 16px;
    height: 56px;
    padding-left: 10px;
    line-height: 56px;
    border: 1px solid #dde4eb;
    color: #333;
    background: #fff;
}
.topModalStyle {
    /* width:234px; */
    /* float:left; */
}
.header {
    width: 100%;
    height: 50px;
    color: #fff;
    background: #4a5a6a;
}
.leftP {
    /* width: 300px; */
    line-height: 50px;
    text-align: left;
    margin-right: 10px;
    /* padding-left: 20px; */
}
.rightU {
    /* width: 300px; */
    line-height: 50px;
    text-align: right;
    padding-right: 20px;
    float: right;
    margin-left: 25px;
    cursor: pointer;
}
.img_user {
    margin-left: 20px;
    width: 30px;
    height: 30px;
    vertical-align: text-top;
    position: relative;
    bottom: 9px;
    margin-left: 15px;
    border-radius: 50%;
}
.btnConter {
    width: 170px;
    height: 50px;
    line-height: 50px;
    float: left;
    text-align: center;
}
.btnDeplogy {
    float: right;
    line-height: 50px;
}
.btnHeader {
    width: 80px;
}
.topologyShowContainer {
    height: 900px;
}
.deployStyle {
    display: inline-block;
    width: 20px;
    right: 3px;
    position: relative;
    /* border-radius: 0px 4px 4px 0px */
}
.deployStyle .ivu-select-arrow {
    margin-right: -5px;
}
#deployStyle .ivu-select-selection {
    border-radius: 0px 4px 4px 0px;
}
.layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.facityContainerStyle {
    display: inline-block;
    width: 105px;
    /* padding-left: 8px; */
    /* border: 1px solid #dcdee2; */
    /* margin: 5px; */
    border-radius: 5px;
    cursor: pointer;
    /* transition: all .2s ease-in-out;
     transition-property: all;
     transition-duration: 0.2s;
     transition-timing-function: ease-in-out;
     transition-delay: 0s; */
}
.facityContainerStyle:hover {
    box-shadow: 5px 5px 5px #dcdee2;
}
.facityContainerStyle_ul {
    width: 100%;
}
.deployContentTypeDiv {
    position: relative;
    /* display: inline-flex; */
    /* flex-direction: column; */
    /* flex-wrap:wrap; */
    /* justify-content:flex-start; */
    /* height: 500px; */
    min-width: 100%;
    /* width:33%; */
    border: 1px solid #e7e7f1;
    /* margin: 0px 10px; */
    /* padding-top: 17px; */
    margin-bottom: 15px;
    border-top: none;
    /*border-radius:5px 5px 0px 0px;*/
}
.deployContent {
    /* display: inline-flex; */
    /* flex-direction: row ; */
    /* flex-wrap:nowrap ; */
    /* width: 100%; */
    /* overflow: auto; */
    /* justify-content:flex-start; */
    /*position: absolute;
     top: 270px;*/
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: auto;
}
/* .deployContent::-webkit-scrollbar {
     width:10px;
     background:#ddd;
 } */
.ivu-modal-body {
    overflow: hidden;
}
#deployPanel .ivu-modal-body {
    padding: 10px;
}
.titleType {
    position: relative;
    /* background:#57a3f3; */
    background: #fff;
    color: #acaeaf;
    /* width:250px; */
    top: 0px;
    margin: auto;
    left: 0px;
    right: 0px;
    height: 28px;
    line-height: 28px;
    border-top: 1px solid #e7e7f1;
    border-bottom: 1px solid #e7e7f1;
    /*border-radius:5px 5px 0px 0px;*/
}
.deployHeader {
    /* width: 100%; */
    /* position: fixed; */
    /* left:0px; */
}
.oLi {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.titleModel {
    /* margin:0px 3px; */
    width: 60px;
    text-align: left;
}
._dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 3px;
    background: #dcdee2;
}
.scorllHidden::-webkit-scrollbar {
    display: none;
}
#leftplatformDeailPanel >>> .ivu-drawer-close {
    position: absolute;
    top: 13%;
    right: -24px;
    display: inline-block;
    width: 25px;
    background: #fff;
    color: #333;
    height: 100px;
    border-radius: 0px 14px 14px 0px;
    line-height: 100px;
    text-align: center;
    /* z-index: 6666; */
    /* box-shadow: #040d18 7px 0px 10px; */
    /* font-size: 12px; */
}

#leftplatformDeailPanel >>> .ivu-drawer-close:hover {
    /* background: #155474; */
    color: #333;
    font-size: 14px;
}
#leftplatformDeailPanel >>> .ivu-icon-ios-close {
    display: none !important;
    color: #0c1b2f !important;
}
#leftplatformDeailPanel >>> .ivu-icon-ios-close:before {
    display: none !important;
    color: #0c1b2f !important;
}
#containerUL li {
    float: left;
    width: 20%;
    text-align: center;
    margin-top: 20px;
}
.oDivStyle {
    width: 60px;
    margin: auto;
}
.oPStyle {
    width: 100%;
    color: #a4a3c4;
}
.uStyle {
    text-decoration: none;
    display: inline-block;
    /* background: #2D8CF0;
     color: #fff;
     border-radius: 8px */
    /* margin-left: 10px */
}
#progessOutline .ivu-progress-inner {
    padding: 2px !important;
    background: #fff !important;
    border: 1px solid #a796db !important;
}
</style>
<style>
#progessOutline .ivu-progress-inner {
    padding: 2px !important;
    background: #fff !important;
    border: 1px solid #a796db !important;
}
.topoPilotBtnList {
    height: 200px;
}
.deplogyPanelclose {
    position: absolute;
    right: 3%;
    top: -20px;
    height: 20px;
    width: 32px;
    border-radius: 5px 5px 0 0;
    background: #fff url(../assets/downClose.png) no-repeat center center;
    cursor: pointer;
}
.ivu-tooltip-inner-with-width {
    word-break: break-all;
}
#leftplatformDeailPanel .ivu-modal-body {
    font-size: 12px;
}
.lf {
    float: left;
}
.rt {
    float: right;
}
.ivu-drawer-body {
    /*overflow: hidden !important; */
    padding-top: 5px !important;
}
</style>
